<template>
  <div class="cartitem" v-if="userinfo.id">
    <div class="title">oi商场旗舰店</div>
    <div class="content">
      <input type="checkbox" name="" id="" @click="check(goods)" :checked="goods.checked">
      <img :src="goods.thumb_url" alt="">
      <span>{{goods.goods_name.slice(0,6)}}</span>
      <div class="inps">
        <el-input-number size="mini" :min="1" class="inp" v-model="goods.buy_count" :max="goods.counts" @change="updatanum(goods,goods.buy_count)"></el-input-number>
      </div>
      <span>¥<i>{{goods.price/100}}</i></span>

    </div>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  props: {
    goods: {
      type: Object
    }
  },

  computed: {
    ...mapGetters(['userinfo'])
  },
  methods: {
    //单选
    check(goods) {
      this.$store.dispatch('cart/ischeck', { goods })
      this.$emit('computeShopCar')
    },
    //商品数量的变化
    updatanum(goods, num) {
      let user_id = this.userinfo.id
      this.$store.dispatch('cart/updatanum', { goods, num, user_id })
      this.$emit('computeShopCar')
    }
  },
  mounted() {
    this.$nextTick(() => {
      let user_id = this.userinfo.id

      this.$store.dispatch('cart/cartlist', { user_id })
    })
  }
}
</script>

<style scoped lang='less'>
.cartitem {
  .title {
    margin: 10px 20px;
  }
  .content {
    display: flex;
    background: #f7f7f7;
    padding-left: 10px;
    padding-right: 20px;
    justify-content: space-between;
    height: 80px;
    img {
      height: 80px;
      width: 80px;
      line-height: 80px;
    }
    span {
      line-height: 80px;
    }
    .inps {
      text-align: center;
      display: flex;
      height: 80px;
      flex-direction: column;
      justify-content: center;
      align-content: center;
    }
  }
}
</style>